<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="Hexo Theme Redefine">
    
    <meta name="author" content="冷武汶">
    <!-- preconnect -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://evan.beee.top" crossorigin>
    
    <!--- Seo Part-->
    
    <link rel="canonical" href="http://example.com/2023/05/29/前端如何实现webvr全景/"/>
    <meta name="robots" content="index,follow">
    <meta name="googlebot" content="index,follow">
    <meta name="revisit-after" content="1 days">
    
        <meta name="description" content="1、方案调研业务需要实现 vr 全景，类似于汽车之家，或者是贝壳看房之类的。经过技术调研，主流实现技术方案主要有 3 种： 1、threejs threejs 在 3D 流域的应用不用多说，但是最终实际效果不好、threejs 的 api 多于繁杂等原因放弃。 2、css3D 没错，css 也可以实现这些 vr 全景效果，考虑到兼容性以及实际体验，最终还是放弃了。 3、pano2vr 或者 krp">
<meta property="og:type" content="article">
<meta property="og:title" content="前端如何实现webvr全景">
<meta property="og:url" content="http://example.com/2023/05/29/%E5%89%8D%E7%AB%AF%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0webvr%E5%85%A8%E6%99%AF/index.html">
<meta property="og:site_name" content="hi">
<meta property="og:description" content="1、方案调研业务需要实现 vr 全景，类似于汽车之家，或者是贝壳看房之类的。经过技术调研，主流实现技术方案主要有 3 种： 1、threejs threejs 在 3D 流域的应用不用多说，但是最终实际效果不好、threejs 的 api 多于繁杂等原因放弃。 2、css3D 没错，css 也可以实现这些 vr 全景效果，考虑到兼容性以及实际体验，最终还是放弃了。 3、pano2vr 或者 krp">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/images/kr/img1.png">
<meta property="og:image" content="http://example.com/images/kr/img2.png">
<meta property="og:image" content="http://example.com/images/kr/img3.png">
<meta property="og:image" content="http://example.com/images/kr/img4.png">
<meta property="og:image" content="http://example.com/images/kr/img5.png">
<meta property="og:image" content="http://example.com/images/kr/img6.png">
<meta property="article:published_time" content="2023-05-29T08:33:02.000Z">
<meta property="article:modified_time" content="2023-05-29T08:40:46.730Z">
<meta property="article:author" content="武汶">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/images/kr/img1.png">
    
    <!--- Icon Part-->
    <link rel="icon" type="image/png" href="/images/avatar.jpg" sizes="192x192">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/avatar.jpg">
    <meta name="theme-color" content="#A31F34">
    <link rel="shortcut icon" href="/images/avatar.jpg">
    <!--- Page Info-->
    
    <title>
        
            前端如何实现webvr全景 -
        
        hi
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    
<link rel="stylesheet" href="/assets/fonts.css">

    <!--- Font Part-->
    
    
    
        <link href="" rel="stylesheet">
    
    

    <!--- Inject Part-->
    
    <script id="hexo-configurations">
    let Global = window.Global || {};
    Global.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    Global.theme_config = {"articles":{"style":{"font_size":"16px","line_height":1.5,"image_border_radius":"14px","image_alignment":"center","image_caption":false,"link_icon":true},"word_count":{"enable":true,"count":true,"min2read":true},"author_label":{"enable":true,"auto":false,"list":[""]},"code_block":{"copy":true,"style":"mac","font":{"enable":false,"family":null,"url":null}},"toc":{"enable":true,"max_depth":3,"number":false,"expand":true,"init_open":true},"copyright":false,"lazyload":true,"recommendation":{"enable":false,"title":"推荐阅读","limit":3,"placeholder":"/images/wallhaven-wqery6-light.webp","skip_dirs":[]},"powered":false},"colors":{"primary":"#A31F34","secondary":null},"global":{"fonts":{"chinese":{"enable":true,"family":null,"url":null},"english":{"enable":false,"family":null,"url":null}},"content_max_width":"1000px","sidebar_width":"210px","hover":{"shadow":true,"scale":false},"scroll_progress":{"bar":false,"percentage":true},"busuanzi_counter":{"enable":false,"site_pv":true,"site_uv":true,"post_pv":true},"pjax":false,"open_graph":true},"home_banner":{"enable":true,"image":{"light":"/images/wallhaven-wqery6-light.webp","dark":"/images/wallhaven-wqery6-dark.webp"},"title":"Hi","subtitle":{"text":["貴方はいつ あのすっごく会いたい人に会いに行くかな"],"hitokoto":{"enable":false,"api":"https://v1.hitokoto.cn"},"typing_speed":100,"backing_speed":80,"starting_delay":500,"backing_delay":1500,"loop":true,"smart_backspace":true},"text_color":{"light":"#fff","dark":"#d1d1b6"},"text_style":{"title_size":"2.6rem","subtitle_size":"1.4rem","line_height":1.2},"custom_font":{"enable":false,"family":null,"url":null},"social_links":{"enable":true,"links":{"github":null,"instagram":null,"zhihu":null,"twitter":null,"email":"1161839630@qq.com"}}},"plugins":{"feed":{"enable":false},"aplayer":{"enable":false,"type":"mini","audios":[{"name":null,"artist":null,"url":null,"cover":null}]},"mermaid":{"enable":false,"version":"9.3.0"}},"version":"2.1.2","navbar":{"auto_hide":true,"color":{"left":"#f78736","right":"#367df7","transparency":12},"links":{"Home":{"path":"/","icon":"fa-regular fa-house"},"About":{"icon":"fa-regular fa-user","path":"/about"},"Links":{"icon":"fa-regular fa-link","submenus":{"chatgpt":"http://www.lengwuwen.cn"}}},"search":{"enable":false,"preload":true}},"page_templates":{"friends_column":2,"tags_style":"blur"},"home":{"sidebar":{"enable":true,"position":"left","first_item":"menu","announcement":null,"links":{"关于我":{"path":"/about","icon":"fa-brands fa-weixin fa-tags"}}},"article_date_format":"YYYY-MM-DD","categories":{"enable":true,"limit":3},"tags":{"enable":true,"limit":3}}};
    Global.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
  </script>
    
    <!--- Fontawesome Part-->
    
<link rel="stylesheet" href="/fontawesome/fontawesome.min.css">

    
<link rel="stylesheet" href="/fontawesome/brands.min.css">

    
<link rel="stylesheet" href="/fontawesome/solid.min.css">

    
<link rel="stylesheet" href="/fontawesome/regular.min.css">

    
    
    
    
<meta name="generator" content="Hexo 5.4.2"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="main-content-container">

        <div class="main-content-header">
            <header class="navbar-container">
    
    <div class="navbar-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                
                hi
                
            </a>
        </div>

        <div class="right">
            <!-- PC -->
            <div class="desktop">
                <ul class="navbar-list">
                    
                        
                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class="" 
                                    href="/"  >
                                    
                                        
                                            <i class="fa-regular fa-house"></i>
                                        
                                        首页
                                    
                                </a>
                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class="" 
                                    href="/about"  >
                                    
                                        
                                            <i class="fa-regular fa-user"></i>
                                        
                                        关于
                                    
                                </a>
                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class="has-dropdown" 
                                    href="#" onClick="return false;">
                                    
                                        
                                            <i class="fa-regular fa-link"></i>
                                        
                                        链接&nbsp;<i class="fa-solid fa-chevron-down"></i>
                                    
                                </a>
                                <!-- Submenu -->
                                
                                    <ul class="sub-menu">
                                    
                                        <li>
                                        <a target="_blank" rel="noopener" href="http://www.lengwuwen.cn">CHATGPT
                                        </a>
                                        </li>
                                    
                                    </ul>
                                
                            </li>
                    
                    
                </ul>
            </div>
            <!-- Mobile -->
            <div class="mobile">
                
                <div class="icon-item navbar-bar">
                    <div class="navbar-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile drawer -->
    <div class="navbar-drawer">
        <ul class="drawer-navbar-list">
            
                
                    <li class="drawer-navbar-item flex-center">
                        <a class="" 
                        href="/"  >
                             
                                
                                    <i class="fa-regular fa-house"></i>
                                
                                首页
                            
                        </a>
                    </li>
                    <!-- Submenu -->
                    
            
                
                    <li class="drawer-navbar-item flex-center">
                        <a class="" 
                        href="/about"  >
                             
                                
                                    <i class="fa-regular fa-user"></i>
                                
                                关于
                            
                        </a>
                    </li>
                    <!-- Submenu -->
                    
            
                
                    <li class="drawer-navbar-item flex-center">
                        <a class="has-dropdown" 
                        href="#" onClick="return false;">
                            
                                
                                    <i class="fa-regular fa-link"></i>
                                
                                链接&nbsp;<i class="fa-solid fa-chevron-down"></i>
                            
                        </a>
                    </li>
                    <!-- Submenu -->
                              
                        
                            <li class="dropdown-item flex-center">
                                <a class="dropdown-item" target="_blank" rel="noopener" href="http://www.lengwuwen.cn">CHATGPT</a>
                            </li>
                        
                    
            

        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="main-content-body">

            

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="post-page-container">
        <div class="article-content-container">

            
            
                <div class="article-title">
                    <h1 class="article-title-regular">前端如何实现webvr全景</h1>
                </div>
            
                
            

            
                <div class="article-header">
                    <div class="avatar">
                        <img src="/images/avatar.jpg">
                    </div>
                    <div class="info">
                        <div class="author">
                            <span class="name">冷武汶</span>
                            
                                <span class="author-label"></span>
                            
                        </div>
                        <div class="meta-info">
                            <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fa-regular fa-pen-fancy"></i>&nbsp;
        <span class="desktop">2023-05-29 16:33:02</span>
        <span class="mobile">2023-05-29 16:33</span>
        <span class="hover-info">创建</span>
    </span>
    
        <span class="article-date article-meta-item">
            <i class="fa-regular fa-wrench"></i>&nbsp;
            <span class="desktop">2023-05-29 16:40:46</span>
            <span class="mobile">2023-05-29 16:40</span>
            <span class="hover-info">更新</span>
        </span>
    

    
    

    
    
    
    
</div>

                        </div>
                    </div>
                </div>
            

            <div class="article-content markdown-body">
                <h3 id="1、方案调研"><a href="#1、方案调研" class="headerlink" title="1、方案调研"></a>1、方案调研</h3><p>业务需要实现 vr 全景，类似于汽车之家，或者是贝壳看房之类的。经过技术调研，主流实现技术方案主要有 3 种：</p>
<p>1、threejs</p>
<p>threejs 在 3D 流域的应用不用多说，但是最终实际效果不好、threejs 的 api 多于繁杂等原因放弃。</p>
<p>2、css3D</p>
<p>没错，css 也可以实现这些 vr 全景效果，考虑到兼容性以及实际体验，最终还是放弃了。</p>
<p>3、pano2vr 或者 krpano</p>
<p>经过实践，这些第三方软件做出的效果确实不错。而且发现许多网站，许多第三方 vr 公司都是用的这些技术。所以决定用第三方软件。</p>
<p>本文将基于 krpano 记录 vr 全景的使用过程。</p>
<h3 id="2、krpano-下载"><a href="#2、krpano-下载" class="headerlink" title="2、krpano 下载"></a>2、krpano 下载</h3><p>很遗憾，krpano 或者 pano2vr 都是收费软件。拿 krpano 来说，基础版本的 199 欧元，高级定制版本 299 欧元，还有一些好用的第三方插件也是收费的。虽然官网提供下载，但是也是体验版本或者是生成 vr 之后有他们自己的 logo 水印。</p>
<p>和我一样，囊中羞涩的同仁，那只好去网上搜索一下，想想其他办法（po jie ban）。</p>
<p><strong>请支持正版软件！！</strong></p>
<p><strong>krpano 官网地址：</strong> <a class="link"   target="_blank" rel="noopener" href="https://krpano.com/download/"  title="krpano.com - Download">krpano.com - Download <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="3、全景图"><a href="#3、全景图" class="headerlink" title="3、全景图"></a>3、全景图</h3><p>做全景，想要达到比较好的效果，需要使用全景相机采集全景图片。采集完成的全景图片需要注意一个问题，那就是底部的相机痕迹。最好的解决方法就是用 ps 把底部相机的痕迹抹除。</p>
<p>如果没有全景图怎么办？</p>
<p>1、用手机的全景模式拍摄。</p>
<p>现在大部分手机支持全景拍摄。虽然效果肯定不如专业的全景相机，但是作为自己体验开发应该也可以用用。</p>
<p>2、网上下载 6 张单张图片。如下图所示：</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/images/kr/img1.png"
                     
                ></p>
<p>我来解释一下几个问题：</p>
<p>1、为什么是 6 张图片？而不是 8 张或者是 10 张。</p>
<p>首先，我们要有立体感。3D 的东西我们可以看成是一个立方体。我们看的时候相当于站在这个立方体的中间，上，下，左，右，前，后这 6 个方向。所以必须是 6 张图片。</p>
<p>2、图片命名？</p>
<p>关于图片命名，可以看到上边的这些图，末尾分别是 b、d、f、l、r、u 这 6 个字母。这 6 个字母不是胡写的，而是分别对应其位置的英文首字母：上：up ；下：down ；左：left ；右：right ；前：front ；后：behind。</p>
<p>图片就准备好了。</p>
<h3 id="4、使用-krpano-制作全景图"><a href="#4、使用-krpano-制作全景图" class="headerlink" title="4、使用 krpano 制作全景图"></a>4、使用 krpano 制作全景图</h3><p>打开下载好的 krpano 文件夹，如下图所示：</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/images/kr/img2.png"
                     
                ></p>
<p>大概可以说说 krpano 文件夹内这些主要文件（夹）的含义。</p>
<p>前三个文件夹，分别是 krpano 的文档、krpano 的模板、krpano 的例子。可以都点开看看，了解一下。</p>
<p>然后需要说的就是”krpano Tools.exe”。双击它，可以打开 krpano 的主程序界面。如何使用下边再说。</p>
<p>最后就是末尾的几个文件带有”droplet.bat”的文件。这些文件是生成全景图的自动脚本。下边介绍使用。</p>
<p>了解完文件夹，就可以开始生成全景图。</p>
<p>如何生成全景图？用鼠标拖拽着图片到这些命令上就可以了。就是这么简单。推荐使用倒数第二个命令来生成全景。如下图所示：</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/images/kr/img3.png"
                     
                ></p>
<p>最后生成一个 vtour 文件夹。如图所示：</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/images/kr/img4.png"
                     
                ></p>
<p>点击倒数第二个 exe 就可以在浏览器中看到自己的全景 vr 场景了。</p>
<p>请注意：不能直接打开 tour.html。必须把他们放进服务器中才可以打开。</p>
<p>至此，全景图已经制作完毕了。</p>
<h3 id="5、krpano-的二次开发"><a href="#5、krpano-的二次开发" class="headerlink" title="5、krpano 的二次开发"></a>5、krpano 的二次开发</h3><p>如果还是想增加一些自己的功能，就必须在其基础上做二次开发。</p>
<p>打开 vtour 文件夹中的 tour.xml,它大概是这样的：</p>
<div class="highlight-container" data-rel="Xml"><figure class="iseeu highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">krpano</span> <span class="attr">version</span>=<span class="string">&quot;1.19&quot;</span> <span class="attr">title</span>=<span class="string">&quot;Virtual Tour&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">include</span> <span class="attr">url</span>=<span class="string">&quot;skin/vtourskin.xml&quot;</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="comment">&lt;!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... --&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">skin_settings</span> <span class="attr">maps</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">maps_type</span>=<span class="string">&quot;google&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">maps_bing_api_key</span>=<span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">maps_google_api_key</span>=<span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">maps_zoombuttons</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">gyro</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">webvr</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">webvr_gyro_keeplookingdirection</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">webvr_prev_next_hotspots</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">littleplanetintro</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">title</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">thumbs</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">thumbs_width</span>=<span class="string">&quot;120&quot;</span> <span class="attr">thumbs_height</span>=<span class="string">&quot;80&quot;</span> <span class="attr">thumbs_padding</span>=<span class="string">&quot;10&quot;</span> <span class="attr">thumbs_crop</span>=<span class="string">&quot;0|40|240|160&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">thumbs_opened</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">thumbs_text</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">thumbs_dragging</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">thumbs_onhoverscrolling</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">thumbs_scrollbuttons</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">thumbs_scrollindicator</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">thumbs_loop</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">tooltips_buttons</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">tooltips_thumbs</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">tooltips_hotspots</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">tooltips_mapspots</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">deeplinking</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">loadscene_flags</span>=<span class="string">&quot;MERGE&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">loadscene_blend</span>=<span class="string">&quot;OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">loadscene_blend_prev</span>=<span class="string">&quot;SLIDEBLEND(0.5, 180, 0.75, linear)&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">loadscene_blend_next</span>=<span class="string">&quot;SLIDEBLEND(0.5,   0, 0.75, linear)&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">loadingtext</span>=<span class="string">&quot;loading...&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">layout_width</span>=<span class="string">&quot;100%&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">layout_maxwidth</span>=<span class="string">&quot;814&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">controlbar_width</span>=<span class="string">&quot;-24&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">controlbar_height</span>=<span class="string">&quot;40&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">controlbar_offset</span>=<span class="string">&quot;20&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">controlbar_offset_closed</span>=<span class="string">&quot;-40&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">controlbar_overlap.no-fractionalscaling</span>=<span class="string">&quot;10&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">controlbar_overlap.fractionalscaling</span>=<span class="string">&quot;0&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">design_skin_images</span>=<span class="string">&quot;vtourskin.png&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">design_bgcolor</span>=<span class="string">&quot;0x2D3E50&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">design_bgalpha</span>=<span class="string">&quot;0.8&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">design_bgborder</span>=<span class="string">&quot;0&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">design_bgroundedge</span>=<span class="string">&quot;1&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">design_bgshadow</span>=<span class="string">&quot;0 4 10 0x000000 0.3&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">design_thumbborder_bgborder</span>=<span class="string">&quot;3 0xFFFFFF 1.0&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">design_thumbborder_padding</span>=<span class="string">&quot;2&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">design_thumbborder_bgroundedge</span>=<span class="string">&quot;0&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">design_text_css</span>=<span class="string">&quot;color:#FFFFFF; font-family:Arial;&quot;</span></span></span><br><span class="line"><span class="tag">	               <span class="attr">design_text_shadow</span>=<span class="string">&quot;1&quot;</span></span></span><br><span class="line"><span class="tag">	               /&gt;</span></span><br><span class="line"></span><br><span class="line">......</span><br><span class="line"></span><br></pre></td></tr></table></figure></div>

<p>我们所有二次开发的代码基本都在这个文件中写入。</p>
<p>1、增加热点</p>
<p>两种方式：</p>
<p>第一，如果增加热点的目的只是想画一个箭头切换一下场景，那么只需要打开”krpano Tools.exe”，打开软件主界面，点击左上方按钮”load xml”,载入 vtour 文件夹中的 tour.xml 文件就可以在软件中看到刚刚制作的场景了，如下图：</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/images/kr/img5.png"
                     
                ></p>
<p>载入场景之后，可以点击第三个按钮”Add hotspot”。这时候你可以在你想要添加热点的地方点击一下，可以生成一个箭头，用鼠标拖拽调整好位置，再点击一下热点，会弹出一个弹框，你可以再下拉框中选择点击这个热点之后将到达的场景名称。如图所示：</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/images/kr/img6.png"
                     
                ></p>
<p>最后记得点击保存。</p>
<p>第二，可以通过代码写入热点。话不多说，直接上代码：</p>
<div class="highlight-container" data-rel="Xml"><figure class="iseeu highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">hotspot</span> <span class="attr">name</span>=<span class="string">&quot;mytext1&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">type</span>=<span class="string">&quot;text&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">zoom</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">ath</span>=<span class="string">&quot;4.642&quot;</span> <span class="attr">atv</span>=<span class="string">&quot;24.049&quot;</span> <span class="attr">edge</span>=<span class="string">&quot;center&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">distorted</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">renderer</span>=<span class="string">&quot;webgl&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">html</span>=<span class="string">&quot;[span]DMI[/span]&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">css</span>=<span class="string">&quot;font-family:Arial; font-size:14px; color:#fff;&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">vcenter</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">padding</span>=<span class="string">&quot;5&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">wordwrap</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">bg</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">bgcolor</span>=<span class="string">&quot;0x000000&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">bgalpha</span>=<span class="string">&quot;0.6&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">bgborder</span>=<span class="string">&quot;0&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">bgroundedge</span>=<span class="string">&quot;0&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">bgshadow</span>=<span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">txtshadow</span>=<span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">mergedalpha</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">oversampling</span>=<span class="string">&quot;1.0&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">mipmapping</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">onautosized</span>=<span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">onover</span>=<span class="string">&quot;tween(alpha,1);tween(scale,0.9);&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">onout</span>=<span class="string">&quot;tween(alpha,1);tween(scale,1);&quot;</span></span></span><br><span class="line"><span class="tag"><span class="attr">onclick</span>=<span class="string">&quot;action(open,container1);&quot;</span></span></span><br><span class="line"><span class="tag">/&gt;</span></span><br></pre></td></tr></table></figure></div>

<p>就是类似于 html 的一个标签 hotspot。至于里边的属性如下，可以参考：</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line">&lt;layer name=&quot;...&quot;        定义引入的元素名称</span><br><span class="line">       type=&quot;image&quot;       引入元素的类型，可以为image、container、text（textfield），container为容器，可在容器内继续引入多个媒体元素</span><br><span class="line">       url=&quot;...&quot;          引入元素的路径（支持格式：SWF, JPG, PNG, GIF.）</span><br><span class="line">       html=&quot;&quot;				显示文字时的内容</span><br><span class="line">       keep=&quot;false&quot;       是否在跳入新场景时仍然保留显示该元素</span><br><span class="line">       parent=&quot;&quot;          设置父容器名称，可以直接是 plugin的name,也可以是全称：parent=&quot;layer[name]&quot;或parent=&quot;hotspot[name]&quot;</span><br><span class="line">       alturl=&quot;&quot;          #引入元素的路径（支持格式：SWF, JPG, PNG, GIF.），只在html5浏览器使用</span><br><span class="line">       devices=&quot;all&quot;      设置显示的设备类型（详见设备列表）</span><br><span class="line">       visible=&quot;true&quot;     设置插入元素是否可见</span><br><span class="line">       enabled=&quot;true&quot;     设置插入元素是否接受鼠标事件</span><br><span class="line">       handcursor=&quot;true&quot;  鼠标移动该元素上时，是否变为小手</span><br><span class="line">       maskchildren=&quot;false&quot;  设置是否将子控件变为蒙板，设置为TRUE后，除子控件范围显示外，子控件边框与父控件边框之间区域将不显示</span><br><span class="line">       scalechildren=&quot;false&quot; 设置是否子空间跟随父控件一同缩放</span><br><span class="line">       zorder=&quot;&quot;              插入元素的次序索引，可以是字符也可以是数字，html5输出必须是0-100整数</span><br><span class="line">       capture=&quot;true&quot;		只是该元素接受事件，false时子元素也可接受事件</span><br><span class="line">       children=&quot;true&quot;    启用当前元素的子元素来接收鼠标事件。</span><br><span class="line">       preload=&quot;false&quot;	预加载，在加载pano之前先加载图层/插件的url，然后执行任何操作。</span><br><span class="line">       blendmode=&quot;normal&quot; 混合/混合模式（ normal, layer, screen, add, subtract, difference, multiply, overlay, lighten, darken, hardlight, invert）仅flash</span><br><span class="line">       style=&quot;&quot;               调用已在文件中定义好的style的名称</span><br><span class="line">       align=&quot;&quot;               元素在屏幕对齐方式，lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom （见示意图）</span><br><span class="line">       edge=&quot;&quot;                元素的边缘或描点层对齐方式，lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom （见示意图）</span><br><span class="line">       x=&quot;&quot;                   对齐边界到对齐点的X横向距离</span><br><span class="line">       y=&quot;&quot;                   对齐边界到对齐点的y横向距离</span><br><span class="line">       ox=&quot;&quot;				偏移</span><br><span class="line">       oy=&quot;&quot;				偏移</span><br><span class="line">       rotate=&quot;0.0&quot;           插入元素显示时旋转度数</span><br><span class="line">       width=&quot;&quot;               插入元素的显示宽度(prop:自适应)</span><br><span class="line">       height=&quot;&quot;              插入元素的显示高度</span><br><span class="line">       minwidth=&quot;0&quot;</span><br><span class="line">		maxwidth=&quot;0&quot;</span><br><span class="line">		minheight=&quot;0&quot;</span><br><span class="line">		maxheight=&quot;0&quot;</span><br><span class="line">        autowidth=&quot;false&quot;  根据内容自适应宽度</span><br><span class="line">        autoheight=&quot;false&quot; 根据内容自适应高度</span><br><span class="line">       scale=&quot;1.0&quot;            插入元素的缩放比例</span><br><span class="line">       pixelhittest=&quot;false&quot;   仅flash</span><br><span class="line">       smoothing=&quot;true&quot;   平滑  仅flash</span><br><span class="line">       accuracy=&quot;0&quot;         精度</span><br><span class="line">       alpha=&quot;1.0&quot;            插入元素的不透明度</span><br><span class="line">       autoalpha=&quot;false&quot;   自动透明度</span><br><span class="line">       usecontentsize=&quot;false&quot;  满画布  仅flash</span><br><span class="line">       scale9grid=&quot;&quot;    定义9格网格（scale9grid=&quot;x-position|y-position|width|height|prescale*&quot;）</span><br><span class="line">       crop=&quot;&quot;                定义元素坐标及宽高  crop=&quot;x-position|y-position|width|height&quot;</span><br><span class="line">       onovercrop=&quot;&quot;          设置元素鼠标移到上方后的坐标及宽高</span><br><span class="line">       ondowncrop=&quot;&quot;          设置元素鼠标按下状态后的坐标及宽高</span><br><span class="line">       mask=&quot;&quot;    遮罩  仅flash</span><br><span class="line">       effect=&quot;&quot;    位图效果适用于层/插件的形象     仅flash</span><br><span class="line">       background=&quot;&quot;  可以设置false 去掉背景</span><br><span class="line">       bgcolor=&quot;0x000000&quot;      type=&quot;container&quot;状态下的背景颜色，非container状态下无效</span><br><span class="line">       bgalpha=&quot;0.0&quot;           背景不透明度</span><br><span class="line">       bgborder=&quot;0&quot;       （bgborder=&quot;widths color alpha&quot;）边框</span><br><span class="line">       bgroundedge=&quot;0&quot;   圆角</span><br><span class="line">       bgshadow=&quot;&quot;     （基本：bgshadow=&quot;xoffset yoffset blur color alpha&quot;；高级：gshadow=&quot;xoffset yoffset blur spread color alpha inset, ...&quot;）阴影</span><br><span class="line">       bgcapture=&quot;false&quot;       是否捕抓在背景容器上事件（type=&quot;container&quot;状态下生效）</span><br><span class="line">       onover=&quot;&quot;               鼠标在经过上方时执行动作</span><br><span class="line">       onhover=&quot;&quot;              鼠标停在上方时执行动作</span><br><span class="line">       onout=&quot;&quot;                鼠标停移出范围时时执行动作</span><br><span class="line">       onclick=&quot;&quot;              鼠标停点击时执行动作</span><br><span class="line">       ondown=&quot;&quot;               鼠标按下时执行动作</span><br><span class="line">       onup=&quot;&quot;                 鼠标按键松开时执行动作</span><br><span class="line">       onloaded=&quot;&quot;             加载元素完成后执行动作</span><br><span class="line">       /&gt;</span><br></pre></td></tr></table></figure></div>

<p>2、增加热点点击事件</p>
<p>增加点击事件，比如点击热点之后弹出一个图片：</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 定义一个动作 --&gt;</span><br><span class="line">&lt;!-- 打开关闭图片 --&gt;</span><br><span class="line">&lt;action name=&quot;open&quot;&gt;</span><br><span class="line">&lt;!-- 这个语法的意思就是把第一个参数的visible（显示）设置为true --&gt;</span><br><span class="line">set(plugin[%1].visible,true);</span><br><span class="line">tween(plugin[%1].alpha,1);</span><br><span class="line">&lt;/action&gt;</span><br><span class="line"></span><br><span class="line">&lt;action name=&quot;close&quot;&gt;</span><br><span class="line">set(plugin[%1].visible,false);</span><br><span class="line">&lt;/action&gt;</span><br><span class="line"></span><br><span class="line"> &lt;hotspot name=&quot;mytext1&quot;</span><br><span class="line">        type=&quot;text&quot;</span><br><span class="line">        zoom=&quot;true&quot;</span><br><span class="line">        ath=&quot;4.642&quot; atv=&quot;24.049&quot; edge=&quot;center&quot;</span><br><span class="line">        distorted=&quot;true&quot;</span><br><span class="line">        renderer=&quot;webgl&quot;</span><br><span class="line">        html=&quot;[span]DMI[/span]&quot;</span><br><span class="line">        css=&quot;font-family:Arial; font-size:14px; color:#fff;&quot;</span><br><span class="line">        vcenter=&quot;false&quot;</span><br><span class="line">        padding=&quot;5&quot;</span><br><span class="line">        wordwrap=&quot;true&quot;</span><br><span class="line">        bg=&quot;true&quot;</span><br><span class="line">        bgcolor=&quot;0x000000&quot;</span><br><span class="line">        bgalpha=&quot;0.6&quot;</span><br><span class="line">        bgborder=&quot;0&quot;</span><br><span class="line">        bgroundedge=&quot;0&quot;</span><br><span class="line">        bgshadow=&quot;&quot;</span><br><span class="line">        txtshadow=&quot;&quot;</span><br><span class="line">        mergedalpha=&quot;true&quot;</span><br><span class="line">        oversampling=&quot;1.0&quot;</span><br><span class="line">        mipmapping=&quot;false&quot;</span><br><span class="line">        onautosized=&quot;&quot;</span><br><span class="line">        onover=&quot;tween(alpha,1);tween(scale,0.9);&quot;</span><br><span class="line">        onout=&quot;tween(alpha,1);tween(scale,1);&quot;</span><br><span class="line">        onclick=&quot;action(open,container1);&quot;</span><br><span class="line">        /&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 司机室右侧面板上ATP旋转开关 --&gt;</span><br><span class="line">        &lt;hotspot name=&quot;mytext2&quot;</span><br><span class="line">        type=&quot;text&quot;</span><br><span class="line">        zoom=&quot;true&quot;</span><br><span class="line">        ath=&quot;99.563&quot; atv=&quot;34.140&quot; edge=&quot;center&quot;</span><br><span class="line">        ......</span><br><span class="line"></span><br><span class="line">        onclick=&quot;action(open,container2);&quot;这里声明点击的动作 其中container2 是下边图片图层的名字</span><br><span class="line">        /&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        &lt;layer</span><br><span class="line">        name=&quot;container2&quot;</span><br><span class="line">        type=&quot;image&quot;      定义图片图层</span><br><span class="line">        url=&quot;图片的地址&quot;</span><br><span class="line">        width=&quot;100%&quot;</span><br><span class="line">        height=&quot;100%&quot;</span><br><span class="line">        maskchildren=&quot;true&quot;</span><br><span class="line">        visible=&quot;0&quot;</span><br><span class="line">        children=&quot;true&quot;</span><br><span class="line">        background=&quot;true&quot;</span><br><span class="line">        bgcapture=&quot;true&quot;</span><br><span class="line">        enabled=&quot;true&quot;</span><br><span class="line">        bgcolor=&quot;0x000000&quot;</span><br><span class="line">        bgalpha=&quot;0.8&quot;</span><br><span class="line">        onclick=&quot;action(close,get(name));&quot;  // 点击这个图片就可以隐藏图片</span><br><span class="line">        &gt;</span><br></pre></td></tr></table></figure></div>

<p>由于 krpano 的功能很多，又有一些属于自己的语法，二次开发的内容就暂时到此结束了。</p>
<p>在网上找到了一个整理好的 krpano 中文文档，地址：<a class="link"   target="_blank" rel="noopener" href="https://www.kancloud.cn/wang11535041/test/404741"  title="plugin/layer · Krpano全景漫游开发手册 · 看云">plugin/layer · Krpano 全景漫游开发手册 · 看云 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>

            </div>

            

            

            

            
                <div class="article-nav">
                    
                    
                        <div class="article-next">
                            <a class="next"
                            rel="next"
                            href="/2023/05/29/vite-vue3%E4%B8%AD%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8iconify%E5%9B%BE%E6%A0%87%E5%BA%93/"
                            >
                                <span class="title flex-center">
                                    <span class="post-nav-title-item">vite+vue3中如何使用iconify图标库</span>
                                    <span class="post-nav-item">下一篇</span>
                                </span>
                                <span class="right arrow-icon flex-center">
                                    <i class="fa-solid fa-chevron-right"></i>
                                </span>
                            </a>
                        </div>
                    
                </div>
            


            
                <div class="comment-container">
                    <div class="comments-container">
    <div id="comment-anchor"></div>
    <div class="comment-area-title">
        <i class="fa-solid fa-comments"></i>&nbsp;评论
    </div>
    

        
            
 
    <div id="waline"></div>
    <script type="module"  >
        import { init } from 'https://evan.beee.top/js/waline.mjs';

        function loadWaline() {
            init({
                el: '#waline',
                serverURL: 'https://a.lengwuwen.cn',
                lang: 'zh-CN',
                dark: 'body[class~="dark-mode"]',
                requiredMeta: ['nick','mail'], // cannot customize by theme config, change it yourself
            });
        }

        if ('false') {
            const loadWalineTimeout = setTimeout(() => {
                loadWaline();
                clearTimeout(loadWalineTimeout);
            }, 1000);
        } else {
            window.addEventListener('DOMContentLoaded', loadWaline);
        }
        
    </script>



        
    
</div>

                </div>
            
        </div>

        
            <div class="toc-content-container">
                <div class="post-toc-wrap">
    <div class="post-toc">
        <div class="toc-title">此页目录</div>
        <div class="page-title">前端如何实现webvr全景</div>
        <ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#1%E3%80%81%E6%96%B9%E6%A1%88%E8%B0%83%E7%A0%94"><span class="nav-text">1、方案调研</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2%E3%80%81krpano-%E4%B8%8B%E8%BD%BD"><span class="nav-text">2、krpano 下载</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3%E3%80%81%E5%85%A8%E6%99%AF%E5%9B%BE"><span class="nav-text">3、全景图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4%E3%80%81%E4%BD%BF%E7%94%A8-krpano-%E5%88%B6%E4%BD%9C%E5%85%A8%E6%99%AF%E5%9B%BE"><span class="nav-text">4、使用 krpano 制作全景图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5%E3%80%81krpano-%E7%9A%84%E4%BA%8C%E6%AC%A1%E5%BC%80%E5%8F%91"><span class="nav-text">5、krpano 的二次开发</span></a></li></ol>

    </div>
</div>
            </div>
        
    </div>
</div>


                

            </div>
            
            

        </div>

        <div class="main-content-footer">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info">
            &copy;
            
              <span>2022</span>
              -
            
            2023&nbsp;&nbsp;<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; color: #f54545"></i>&nbsp;&nbsp;<a href="/">冷武汶</a>
        </div>
        
        <div class="theme-info info-item">
            <span class="powered-by-container">由 <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" href="https://hexo.io">Hexo</a> 驱动</span>
                <br>
            <span class="theme-version-container">主题&nbsp;<a class="theme-version" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.1.2</a>
        </div>
        
        
        
            <div id="start_div" style="display:none">
                2022/8/17 11:45:14
            </div>
            <div>
                博客已运行 <span class="odometer" id="runtime_days" ></span> 天 <span class="odometer" id="runtime_hours"></span> 小时 <span class="odometer" id="runtime_minutes"></span> 分钟 <span class="odometer" id="runtime_seconds"></span> 秒
            </div>
        
        
        
            <script async >
                try {
                    function odometer_init() {
                    const elements = document.querySelectorAll('.odometer');
                    elements.forEach(el => {
                        new Odometer({
                            el,
                            format: '( ddd).dd',
                            duration: 200
                        });
                    });
                    }
                    odometer_init();
                } catch (error) {}
            </script>
        
        
        
    </div>  
</footer>
        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="article-tools-list">
        <!-- TOC aside toggle -->
        
            <li class="right-bottom-tools page-aside-toggle">
                <i class="fa-regular fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
            <li class="go-comment">
                <i class="fa-regular fa-comments"></i>
            </li>
        
    </ul>
</div>

        </div>
    

    <div class="right-side-tools-container">
        <div class="side-tools-container">
    <ul class="hidden-tools-list">
        <li class="right-bottom-tools tool-font-adjust-plus flex-center">
            <i class="fa-regular fa-magnifying-glass-plus"></i>
        </li>

        <li class="right-bottom-tools tool-font-adjust-minus flex-center">
            <i class="fa-regular fa-magnifying-glass-minus"></i>
        </li>

        <li class="right-bottom-tools tool-expand-width flex-center">
            <i class="fa-regular fa-expand"></i>
        </li>

        <li class="right-bottom-tools tool-dark-light-toggle flex-center">
            <i class="fa-regular fa-moon"></i>
        </li>

        <!-- rss -->
        

        

        <li class="right-bottom-tools tool-scroll-to-bottom flex-center">
            <i class="fa-regular fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="visible-tools-list">
        <li class="right-bottom-tools toggle-tools-list flex-center">
            <i class="fa-regular fa-cog fa-spin"></i>
        </li>
        
            <li class="right-bottom-tools tool-scroll-to-top flex-center">
                <i class="arrow-up fas fa-arrow-up"></i>
                <span class="percent"></span>
            </li>
        
        
    </ul>
</div>

    </div>

    <div class="image-viewer-container">
    <img src="">
</div>


    


</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/layouts/navbarShrink.js"></script>

<script src="/js/tools/scrollTopBottom.js"></script>

<script src="/js/tools/lightDarkSwitch.js"></script>





    
<script src="/js/tools/codeBlock.js"></script>




    
<script src="/js/layouts/lazyload.js"></script>




    
<script src="/js/tools/runtime.js"></script>

    
<script src="/js/layouts/odometer.min.js"></script>

    
<link rel="stylesheet" href="/assets/odometer-theme-minimal.css">




  
<script src="/js/libs/Typed.min.js"></script>

  
<script src="/js/plugins/typed.js"></script>







<div class="post-scripts">
    
        
<script src="/js/tools/tocToggle.js"></script>

<script src="/js/libs/anime.min.js"></script>

<script src="/js/layouts/toc.js"></script>

<script src="/js/plugins/tabs.js"></script>

    
</div>




</body>
</html>
